<template>
  <div class="container">
    <div class="title">本地的 todo list 代办清单</div>
    <el-button @click="dialogFormVisible = true">创建</el-button>
    <div class="table-box">
      <el-table :data="tableData" style="width: 800px">
        <el-table-column prop="tableData" label="内容" width="300">
          
        </el-table-column>
        <el-table-column prop="time" label="时间" width="300">
          
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="danger"
              >删除</el-button
            >
            <el-button size="small" type="primary"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 创建内容弹框 -->
    <el-dialog v-model="dialogFormVisible" title="添加代办">
      <el-form :model="form">
        <el-form-item label="内容">
          <el-input/>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="timeVal"
            type="date"
            placeholder="Pick a day"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false"
          type="primary">添加</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tableData :[
        {
          tableData: '123',
          time: '456'
        }
      ],
      dialogFormVisible: false,
      timeVal: ''
    }
  },
}
</script>
<style scoped lang="less">
.container{
  padding: 50px;
}
.title{
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px;
}
</style>